<template>
    <div class="table-search">
        <el-form id="searchPanel" label-width="120px" inline>   
            <!-- 可以选择配置的方式传入 -->
            <template v-if="searchList.length > 0">
                <el-form-item v-for="item in searchList" :key="item.index" :label="item.label">
                    <!-- input输入框 -->
                    <template v-if="item.type === 'input'">
                        <el-input v-model="searchModel[item.name]" placeholder="请输入内容" size="small"></el-input>
                    </template>
                    <!-- select下拉框 -->
                    <template v-if="item.type === 'select'">
                        <el-select v-model="searchModel[item.name]" placeholder="请选择" size="small">
                            <el-option v-for="option in item.options" :key="option.index" :label="option.label" :value="option.value"></el-option>
                        </el-select>
                    </template>
                    <!-- date时间选择器 -->
                    <template v-if="item.type === 'date'">
                        <el-date-picker
                            v-model="searchModel[item.name]"
                            type="date"
                            :placeholder=" item.placeholder || '选择日期'"
                            :format="item.format"
                            :value-format="item.format">
                        </el-date-picker>
                    </template>
                </el-form-item>
                <el-form-item>
                    <div class="search-btns">
                        <span v-for="opt,index in searchOpeartors" :key="index"> 
                            <el-button v-if="opt.name === 'search'" size="small" :type="opt.type" @click="onSubmit">{{opt.text}}</el-button>
                            <el-button v-if="opt.name === 'reSet'" size="small" :type="opt.type" @click="reSet">{{opt.text}}</el-button>
                        </span>
                    </div>
                </el-form-item>
            </template>
            <!-- 也可以选择以插槽的方式传入 -->
            <slot name="searchContent">                
            </slot>
        </el-form>
        <!-- <div class="search-btns">
            <span v-for="opt,index in searchOpeartors" :key="index"> 
                <el-button v-if="opt.name === 'search'" size="small" :type="opt.type" @click="onSubmit">{{opt.text}}</el-button>
                <el-button v-if="opt.name === 'reSet'" size="small" :type="opt.type" @click="reSet">{{opt.text}}</el-button>
            </span>
        </div> -->
    </div>
    
</template>

<script>
export default {
    name:'searchPanel',
    props:{
        searchList:{
            type:Array,
            require:true
        },
        searchModel: { // 搜索条件绑定值
            type: Object,
            required: true,
            default () {
                return {}
            }
        },
        searchOpeartors:{
            type:Array,
            require:true,
            defaut:()=> {return [
                { 
                    text:'查询',
                    name:'search',
                    type:'primary'
                },
                { 
                    text:'重置',
                    name:'reSet',
                    type:'primary'
                }
            ]
            }
        }
    },
    // inject:{
    //     searchModel:{
    //         default:{}
    //     }
    // },
    created(){
    },
    mounted(){
    },
    methods:{
        onSubmit(){
            this.$emit('onSubmit')
        },
        reSet(){
            for (const key in this.searchModel) {
                this.searchModel[key] = '';
            }
            this.$nextTick(()=>{
                this.$emit('onSubmit',this.searchModel);
            })
        }
    }
}
</script>

<style lang="less">
.table-search{
    padding-bottom:10px;
    .el-form-item{
        height: 40px;
        .el-form-item__label{
            color: #FFFFFFA6;
        }
        input{
            background: transparent;
            border: 1px solid rgba(255, 255, 255, .2);
            color: #FFFFFFA6;
        }
    }
    .search-btns{
        position: relative;
        padding-left:120px;
        .el-button{
            margin-right:10px;
        }
        }
    }
    input::placeholder{
			color:#FFFFFFA6;
		}
</style>